<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>首页</title>
  <link rel="stylesheet" href="./static/css/layui.css" media="all">
  <link rel="stylesheet" href="./static/css/common.css">
</head>
<body>

<div>
  <form class="layui-form">
    <div class="layui-row">
      <div class="layui-form-item layui-col-md12 layui-col-xs12">
        <div class="layui-inline">
          <label class="layui-form-label">职工姓名</label>
          <div class="layui-input-inline">
            <input type="tel" name="name" placeholder="职工姓名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">职工电话</label>
          <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="职工电话" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <div class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh-3"></i>清空搜索
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">职工邮箱</label>
          <div class="layui-input-inline">
            <input type="tel" name="email" placeholder="职工邮箱" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">职工部门</label>
          <div class="layui-input-inline">
            <input name="department" placeholder="请选择部门" readonly department-id="" class="layui-input" id="demo2">
          </div>
        </div>
        <div class="layui-inline">
          <div class="layui-input-block">
            <button type="button" id="searchBtn" class="layui-btn" lay-submit="" lay-filter="search"><i
                    class="layui-icon layui-icon-search"></i>立即搜索
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData"><i
            class="layui-icon layui-icon-delete"></i>删除选中项
    </button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addSalary">分配工资</a>
</script>


<script src="./static/layui.js"></script>
<script src="./static/common.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>
  layui.use(['table', 'jquery', 'layer', 'dropdown'], function () {
    var table = layui.table,
      $ = layui.$,
      layer = layui.layer,
      dropdown = layui.dropdown;

    $(() => {
      $.get("/StaffManagement/department/getAll", "", data => {
        if (data.code == 0) {
          let menu = [];
          for (let temp of data.data) {
            menu.push({
              title: temp.departmentName,
              id: temp.id
            })
          }
          console.log(menu);
          dropdown.render({
            elem: '#demo2'
            , data: menu
            , click: function (obj) {
              this.elem.val(obj.title);
              this.elem.attr("department-id", obj.id);
            }
          });
        }
      })

      $("#searchBtn").bind("click", () => {
        table.reload('test', {
          url: "/StaffManagement/employee/getAll?name=" + $("input[name='name']").val() + "&phone=" + $("input[name='phone']").val() +
            "&email=" + $("input[name='email']").val() + "&department=" + $("input[name='department']").attr("department-id"),
          methods: "get"
        })
      })
    })

    table.render({
      elem: '#test'
      , url: '/StaffManagement/employee/getAll'
      , id: "test"
      , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: ['filter', 'exports', 'print']
      , title: '用户数据表'
      , cols: [[
        {type: 'checkbox', fixed: 'left'}
        , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
        , {field: 'name', title: '职工姓名', width: 120}
        , {
          field: 'role', title: '职工角色', width: 120, templet: data => {
            return data.role ? data.role.roleName : "普通员工";
          }
        }
        , {field: 'phone', title: '电话', width: 150}
        , {field: 'email', title: '邮箱', width: 180}
        , {
          field: 'enterDate', title: '加入时间', width: 180, templet: data => {
            return new Date(data.enterDate).format("yyyy-MM-dd hh:mm:ss");
          }
        }
        , {
          field: 'department', title: '部门', width: 150, templet: data => {
            return data.department.departmentName;
          }
        }
        , {
          field: 'img', title: '头像', width: 100, templet: data => {
            return `<img src="http://localhost:8080/StaffManagement/static/image/${data.img}" width="80px"/>`
          }
        }
        , {field: 'right', title: '操作', toolbar: '#barDemo', width: 200}
      ]]
      ,
      page: true
    });

    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
      if (obj.event == 'getCheckData') {
        let user = JSON.parse(window.localStorage.getItem("user"));
        console.log(user);
        if (user.role.roleName != "管理员") {
          swal("提示", "您没有该权限", "warning");
          return;
        }
        let checkStatus = table.checkStatus(obj.config.id);
        if (checkStatus.data.length == 0) {
          swal("提示", "请选择需要删除的行", "warning");
          return;
        }
        swal({
          title: "您确定要删除吗？",
          text: "该操作将永久删除选中记录",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        }).then(willDelete => {
          if (willDelete) {
            let ids = "";
            checkStatus.data.forEach(item => {
              ids += item.id + ",";
            });
            $.get("/StaffManagement/employee/deleteList?ids=" + ids, "", data => {
              if (data.code == 200) {
                swal("提示", data.message, "success").then(() => {
                  table.reload('test', {
                    url: '/StaffManagement/employee/getAll'
                  })
                })
              } else {
                swal("提示", data.message, "error");
              }
            })
          } else {
            swal("提示", "您取消了删除", "info");
          }
        })
      }
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      console.log(obj)
      let user = JSON.parse(window.localStorage.getItem("user"));
      console.log(user);
      if (user.role.roleName != "管理员") {
        swal("提示", "您没有该权限", "warning");
        return;
      }
      if (obj.event === 'del') {
        swal({
          title: "您确定要删除吗？",
          text: "该操作将永久删除该条记录",
          icon: "warning",
          buttons: true,
          dangerMode: true,
        })
          .then((willDelete) => {
            if (willDelete) {
              $.get("/StaffManagement/employee/delete?id=" + obj.data.id, "", data => {
                if (data.code == 200) {
                  swal("提示", data.message, "success").then(() => {
                    table.reload('test', {
                      url: '/StaffManagement/employee/getAll'
                    })
                  });
                } else {
                  swal("提示", data.message, "error");
                }
              })
            } else {
              swal("提示", "您取消了删除", "info");
            }
          });
      } else if (obj.event === 'edit') {
        layer.open({
          type: 2,
          title: "编辑员工",
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['100%',
            '100%'],
          content: "employEdit.html",
          btn: ['取消'],
          anim: 4,
          success: (layero, index) => {
            let body = layer.getChildFrame('body', index);
            body.find("#id").val(obj.data.id);
            body.find("#name").val(obj.data.name);
            body.find("#password").val(obj.data.password);
            body.find("#phone").val(obj.data.phone);
            body.find("#email").val(obj.data.email);
            body.find("#departmentId").val(obj.data.departmentId);
            body.find("#enterDate").val(new Date(obj.data.enterDate).format("yyyy-MM-dd hh:mm:ss"));
            body.find("#img").val(obj.data.img);
            body.find("#roleName").val(obj.data.role ? obj.data.role.roleName : "普通员工");
            layui.form.render();
          }
        })
      } else if (obj.event === 'addSalary') {
        layer.open({
          type: 2,
          title: "编辑工资",
          toolbar: '#toolbarDemo',
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['100%',
            '100%'],
          content: "salaryEdit.html",
          btn: ['取消'],
          anim: 4,
          success: (layero, index) => {
            let body = layer.getChildFrame('body', index);
            body.find("#empId").val(obj.data.id);
            body.find("#empName").val(obj.data.name);
            body.find("#departmentName").val(obj.data.department.departmentName);
            body.find("#roleName").val(obj.data.role.roleName);
            body.find("#money").val(obj.data.money);
            layui.form.render();
          }
        })
      }
    });
  })
  ;
</script>

</body>
</html>